<template>
  <div>
    <el-card>
         <!-- 头部搜索区域 -->
    <div style="margin-bottom: 30px">
      <el-input
        style="width: 60%; margin-right: 30px"
        size="large"
        placeholder="输入关键字进行过滤"
        v-model="filterText"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        size="large"
        icon="el-icon-plus"
        @click="addTree"
 v-permission="'menu:add'"
        >父级</el-button
      >
      <el-button size="large" icon="el-icon-download" @click="handleExport"  v-permission="'menu:export'"
        >导出</el-button
      >
    </div>
    <!-- 树状结构区域 -->
    <div>
      <p style="margin-bottom: 20px">菜单权限树</p>
      <el-tree
        node-key="id"
        accordion
        :data="treeData"
        :auto-expand-parent="false"
        :props="{ children: 'children', label: 'menuName' }"
        :default-expanded-keys="open"
        show-checkbox
        check-strictly
        highlight-current
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        ref="tree"
      >
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <div>
            <span style="margin-right: 10px" :class="data.icon"></span>
            <span>{{ node.label }}</span>
            <el-tag style="margin-right: 10px" v-if="data.type === 0">
              菜单
            </el-tag>
            <el-tag style="margin-right: 10px" v-else type="success"
              >权限[{{ data.perms }}]</el-tag
            >
          </div>
          <div style="float: right">
            <el-button
              type="text"
              icon="el-icon-edit"
              size="mini"
              @click="EditTree(data)"
               v-permission="'menu:edit'"
              >编辑
            </el-button>
            <el-button
              type="text"
              icon="el-icon-plus"
              size="mini"
              @click="addTree2(data)"
 v-permission="'menu:add'"
              >添加
            </el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              size="mini"
              @click="delTree(data)"
               v-permission="'menu:delete'"
            >
              删除
            </el-button>
          </div>
        </div>
      </el-tree>
    </div>
    <el-dialog :title="addTitle" :visible.sync="addtreeShow" width="50%">
      <el-form
        ref="form"
        v-if="addtreeShow"
        label-width="100px"
        :model="addtreeform"
        :rules="addformRules"
      >
        <el-form-item label="节点名称" prop="menuName">
          <el-input v-model="addtreeform.menuName"></el-input>
        </el-form-item>
        <el-form-item label="url">
          <el-input v-model="addtreeform.url"></el-input>
        </el-form-item>
        <el-form-item label="权限编码">
          <el-input v-model="addtreeform.perms"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="addtreeform.icon"></el-input>
        </el-form-item>
        <el-form-item label="是否可用" prop="disabled">
          <el-radio-group v-model="addtreeform.disabled">
            <el-radio :label="false">可用</el-radio>
            <el-radio :label="true">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否展开" prop="open">
          <el-radio-group v-model="addtreeform.open">
            <el-radio :label="1">展开</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="orderNum">
          <el-input-number
            v-model="addtreeform.orderNum"
            :min="1"
            :max="10"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-radio-group v-model="addtreeform.type">
            <el-radio :label="0">菜单</el-radio>
            <el-radio :label="1">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hanleColse">取 消</el-button>
        <el-button type="primary" @click="handleSumbit">确 定</el-button>
      </span>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  deleteMenuApi,
  getAllMenuListApi,
  addMenuApi,
  updateMenuInfoApi,
  exportApi
} from '../../../api/menus'
export default {
  data () {
    return {
      filterText: '', // 筛选文本
      treeData: [],
      open: [],
      addtreeShow: false,
      addtreeform: {
        parentId: '',
        menuName: '',
        url: '',
        type: '',
        orderNum: '',
        disabled: '',
        open: '',
        perms: ''
      },
      addformRules: {
        menuName: [
          { required: true, message: '节点名称不能为空', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        disabled: [
          { required: true, message: '节点状态不能为空', trigger: 'blur' }
        ],

        orderNum: [
          { required: true, message: '排序不能为空', trigger: 'blur' }
        ],
        type: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
        open: [
          { required: true, message: '是否展开不能为空', trigger: 'blur' }
        ]
      },
      addTitle: '',
      isEdit: false,
      editId: null
    }
  },
  methods: {
    // 导出
    async handleExport () {
      const res = await exportApi()
      // 将二进制文件转化为可访问的url
      const url = window.URL.createObjectURL(res)
      // 创建一个a链接
      const a = document.createElement('a')
      // 将a标签插入到body
      document.body.appendChild(a)
      a.href = url
      a.download = '用户列表.xls'
      a.click()
      window.URL.revokeObjectURL(url)
    },

    delTree (data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await deleteMenuApi(data.id)
          if (!res.success) return this.$notify.error(res.data.errorMsg)
          this.$notify.success('删除成功')
          this.getMenuTreeData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleSumbit () {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        this.isEdit ? this.onEdit() : this.onSumbit()
      })
    },
    EditTree (data) {
      this.isEdit = true
      this.addTitle = `编辑节点 ：当前【${data.menuName}】`
      this.addtreeform = data
      this.editId = data.id
      this.addtreeShow = true
    },
    // 给节点添加
    addTree2 (data) {
      this.isEdit = false
      this.addTitle = `添加节点 ：当前【${data.menuName}】`
      this.addtreeShow = true
      this.addtreeform.parentId = data.id
    },
    // 编辑
    async onEdit () {
      const res = await updateMenuInfoApi(this.editId, this.addtreeform)
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.$notify.success('更新成功')
      this.getMenuTreeData()
      this.hanleColse()
    },
    // 添加
    async onSumbit () {
      const res = await addMenuApi(this.addtreeform)
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.$notify.success('添加成功')
      this.getMenuTreeData()
      this.hanleColse()
    },
    // 关闭弹窗
    hanleColse () {
      this.addtreeShow = false
      this.$refs.form.resetFields()
      this.addtreeform = {
        parentId: '',
        menuName: '',
        url: '',
        type: '',
        orderNum: '',
        disabled: '',
        open: '',
        perms: ''
      }
      this.editId = null
    },
    // 获取树状数据
    async getMenuTreeData () {
      const res = await getAllMenuListApi()
      if (!res.success) return this.$notify.error(res.data.errorMsg)
      this.treeData = res.data.tree
      this.open = res.data.open
    },
    // 筛选树
    filterNode (value, data) {
      if (!value) return true
      return data.menuName.indexOf(value) !== -1
    },
    // 点击+父级按钮
    addTree () {
      this.isEdit = false
      this.addTitle = '添加第一父级'
      this.addtreeShow = true
      this.addtreeform.parentId = '0'
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  created () {
    this.getMenuTreeData()
  }
}
</script>

<style>
.custom-tree-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}
</style>
